<template>
  <div class="sceneSource">
    <div class="main-content" v-show="!isHideleft">
      <div class="block_title"><img src="../../../assets/vf_images/model.png" />模型资源库</div>
      <div class="border-box">
        <div class="t_line_box">
          <i class="t_l_line"></i>
          <i class="l_t_line"></i>
        </div>
        <div class="t_line_box">
          <i class="t_r_line"></i>
          <i class="r_t_line"></i>
        </div>
        <div class="t_line_box">
          <i class="l_b_line"></i>
          <i class="b_l_line"></i>
        </div>
        <div class="t_line_box">
          <i class="r_b_line"></i>
          <i class="b_r_line"></i>
        </div>
      </div>
      <div class="content-block">
        <div class="search-block">
          <div class="select-block">
            <!-- <el-select v-model="value" placeholder="请选择" size="small">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> -->
            <el-cascader v-model="selectedId" placeholder="请选择" size="small" :options="options"
              :props="{ expandTrigger: 'hover' }" :show-all-levels="false" @change="handleSelectChange">
            </el-cascader>
          </div>
          <div class="input-block">
            <el-input placeholder="请输入关键字" v-model="keywords" size="small">
              <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;"></i>
            </el-input>
          </div>
          <div class="search-button" @click="handleSearch" @keyup.enter="handleSearch">查询</div>
        </div>
        <div class="imgs-block">
          <div class="img-content" v-for="item of images" :key="item.id" @click="itemClick(item.id)">
            <el-image :src="item.img">
            </el-image>
            <div class="label">{{item.name}}</div>
            <div class="tips">{{item.type}}</div>
            <div class="min-btn" @click.stop="addClick(item.id)">
              <img src="../../../assets/vf_images/plus.png" />
            </div>
          </div>
        </div>
        <div class="pagination-block">
          <el-button size="small" :disabled="preDisabled" icon="el-icon-arrow-left" @click="pervious">上一页</el-button>
          <el-button size="small" :disabled="nextDisabled" @click="next" style="margin-right: 3rem;">下一页<i
              class="el-icon-arrow-right el-icon--right"></i></el-button>
          <el-pagination ref="pageGroup" @current-change="handleCurrentChange" :current-page.sync="currentPage"
            :page-size="pageSize" :total="total" layout="->">
          </el-pagination>
          <div class="total">{{"共"+total+"条"}}</div>
        </div>
      </div>
    </div>
    <div class="button-showOrhide">
      <div v-show="!isHideleft" class="button-hide-panel" @click="hideFun">
        <i class="el-icon-caret-left"></i>
      </div>
      <div v-show="isHideleft" class="button-show-panel" @click="showFun">
        <i class="el-icon-caret-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getListData,
    getSelectTree
  } from '@/api/vf'
  export default {
    name: 'sceneSource',
    components: {

    },
    props: {

    },
    computed: {

    },
    watch: {},
    data() {
      return {
        options: [],/* 资源树 */
        selectedId:[],/* 下拉框选中对应id数组 */
        keywords: '',/* 关键字 */
        classifyId:'',/* 下拉框选中对应id */
        images: [],/* 资源图片列表 */
        currentPage: 1,
        total: 0,
        pageSize: 6,
        preDisabled: true,
        nextDisabled: false,
        isHideleft: false,
      }
    },
    created() {
    	let vm = this;
    	document.onkeydown = function(e) {/* enter查询 */
    		let key;
    		if (window.event == undefined) {
    			key = e.keyCode;
    		} else {
    			key = window.event.keyCode;
    		}
    		//enter的ASCII码是13
    		if (key == 13) {
    			vm.handleSearch();
    		}
    	}
    },
    mounted: function() {
      this.getApiListData()
      this.getApiSelectTree()
    },
    methods: {
      itemClick: function(key) {
        // console.log(key)
      },
      addClick: function(id) {/* 添加模型 */
        this.$emit("getApiModelById",id)
      },
      handleCurrentChange: function(e) {/* 改变页当前页 */
        if (this.currentPage === 1) {
          this.preDisabled = true
        } else {
          this.preDisabled = false
        }
        this.getApiListData()
      },
      handleSelectChange: function() {/* 下拉框选中 */
        // console.log("当前选中",this.selectedId)
        let index = this.selectedId.length-1
        this.classifyId = this.selectedId[index]
      },
      pervious: function() {/* 上一页 */
        this.$refs.pageGroup.prev()
      },
      next: function() {/* 下一页 */
        this.$refs.pageGroup.next()
      },
      hideFun: function() {/* 隐藏侧栏 */
        this.isHideleft = true;
      },
      showFun: function() {/* 显示侧栏 */
        this.isHideleft = false;
      },
      getApiListData:function(){/* 获取素材列表 */
        let param = {
          page:this.currentPage,
          limit:this.pageSize,
          keywords:this.keywords,
          classifyId:this.classifyId
        }
        getListData(param).then(res =>{
          if(res.code === 200){
            // console.log("请求结果",res)
            this.images = res.data
            this.total = res.count
            if (this.total / this.pageSize > this.currentPage) {
              this.nextDisabled = false
            } else {
              this.nextDisabled = true
            }
          }
        }).catch(() => {}).then(() => {})
      },
      getApiSelectTree:function(){/* 获取素材资源树 */
        getSelectTree().then(res =>{
          // console.log("资源树",res)
          this.options =[]
          let temp ={}
          let children =[]
          res.map(item =>{
            temp ={}
            temp.value = item.id;
            temp.label = item.name;
            if(item.children){
              children = []
              item.children.map(item =>{
                let temp1={}
                temp1.value = item.id;
                temp1.label = item.name;
                children.push(temp1)
              })
              temp.children = children
            }
            this.options.push(temp)
          })
        }).catch(() => {
          console.log("请求错误")
        })
      },
      handleSearch:function(){/* 查询 */
        this.currentPage = 1;
        this.pageSize = 6;
        this.getApiListData()
      }
    },
  }
</script>

<style lang="scss">
  .sceneSource {
    width: 32rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    pointer-events: auto;

    .main-content {
      width: 32rem;
      border: 1px dotted #1F3D75;
      box-sizing: border-box;
      position: relative;
      margin-top: 3rem;
      margin-left: 2rem;
      background-color: rgba(14, 30, 52, 0.2);

      .block_title {
        background-color: #1F3D75;
        border-radius: 1.8rem;
        position: absolute;
        height: 3.5rem;
        width: 60%;
        top: -1.8rem;
        color: rgba(255, 255, 255, 0.8);
        font-weight: bold;
        font-size: 1.5rem;
        left: 20%;
        line-height: 3.5rem;
        text-align: center;

        >img {
          height: 2.3rem;
          width: 2.3rem;
          margin-right: 1.5rem;
          position: relative;
          top: 0.4rem
        }
      }

      .border-box {
        .l_t_line {
          width: 5px;
          height: 24px;
          left: -3px;
          top: -3px;
        }

        .t_l_line {
          height: 5px;
          width: 26px;
          left: -3px;
          top: -3px;
        }

        .t_line_box {
          // position: absolute;
          width: 100%;
          height: 100%;
        }

        .t_line_box i {
          background-color: rgba(71, 136, 251, 0.8);
          box-shadow: 0px 0px 10px rgba(71, 136, 251, 0.8);
          position: absolute;
        }

        .t_r_line {
          height: 5px;
          width: 26px;
          right: -3px;
          top: -3px;
        }

        .t_title {
          width: 100%;
          height: 100%;
          text-align: center;
          font-size: 2.5em;
          line-height: 40px;
          color: #fff;
        }

        .r_t_line {
          width: 5px;
          height: 24px;
          right: -3px;
          top: -3px;
        }

        .l_b_line {
          width: 5px;
          height: 24px;
          left: -3px;
          bottom: -3px;
        }

        .b_l_line {
          height: 5px;
          width: 26px;
          left: -3px;
          bottom: -3px;
        }

        .r_b_line {
          width: 5px;
          height: 24px;
          right: -3px;
          bottom: -3px;
        }

        .b_r_line {
          height: 5px;
          width: 26px;
          right: -3px;
          bottom: -3px;
        }
      }

      .content-block {
        margin: 1rem 0rem;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .search-block {
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-wrap: nowrap;
          height: 5rem;
          // width: 100%;
          margin: 1rem 0.5rem;
          background-color: rgba(0, 0, 0, 0.2);
          // border-bottom:1px dashed rgba(45, 92, 171, 0.6) ;
          // border-top:1px dashed rgba(45, 92, 171, 0.6) ;
          border-bottom: 1px solid rgba(32, 74, 105, 0.3);
          border-top: 1px solid rgba(32, 74, 105, 0.3);
          // width: 100%;

          .select-block {
            margin: 0rem 1rem;

            // .el-select.el-select--small {
            //   width: 10rem;

            //   .el-input--small {
            //     >.el-input__inner {
            //       font-size: 1rem;
            //       color: #fff;
            //       background: rgba(45, 92, 171, 0.8);
            //       border-color: rgba(45, 92, 171, 0.8) !important;
            //     }

            //     .el-input__suffix {
            //       .el-select__caret {
            //         color: #fff;
            //         font-size: 1rem;
            //       }
            //     }
            //   }
            // }
            .el-cascader.el-cascader--small {
              width: 10rem;

              .el-input--small {
                >.el-input__inner {
                  font-size: 1rem;
                  color: #fff;
                  background: rgba(45, 92, 171, 0.8);
                  border-color: rgba(45, 92, 171, 0.8) !important;
                }

                .el-input__suffix {
                  .el-select__caret {
                    color: #fff;
                    font-size: 1rem;
                  }
                }
              }
            }
          }

          .input-block {
            .el-input.el-input--small {
              width: 12rem;

              .el-input__inner {
                font-size: 1rem;
                color: #fff;
                background: rgba(45, 92, 171, 0.8);
                border-color: rgba(45, 92, 171, 0.8) !important;
              }
            }
          }

          .search-button {
            width: 6rem;
            height: 2.8rem;
            background: rgba(71, 136, 251, 0.8);
            color: #fff;
            display: flex;
            font-size: 1rem;
            justify-content: center;
            align-items: center;
            margin: 0rem 1rem;
            border-radius: 0.4rem;
            cursor: pointer;

            &:hover {
              background: rgb(71, 136, 251);
            }
          }
        }

        .imgs-block {
          height: 48rem;
          background-color: #fff;
          // margin: 1rem 1rem;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: flex-start;
          align-content: flex-start;
          overflow-y: auto;
          background-color: rgba(14, 30, 52, 0.3);

          .img-content {
            height: 14rem;
            width: 14.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin: 0.5rem 0rem;
            background-color: #1F3D75;
            cursor: pointer;
            position: relative;

            .el-image {
              height: 11rem;
              width: 14.5rem;

              >img {
                // height: auto;
                width: auto;
                max-width: 100%;
                max-height: 100%;
              }
            }

            .label {
              font-size: 1rem;
              color: #FFFFFF;
              margin-bottom: 1rem;
            }

            .tips {
              // width: 2rem;
              height: 2rem;
              background-color: #1F3D75;
              color: #fff;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              padding: 0rem 0.5rem;
              position: absolute;
              top: 0rem;
              bottom: auto;
              left: 0rem;
              right: auto;
            }

            .min-btn {
              height: 2rem;
              width: 2rem;
              background-color: #1F3D75;
              // color: #fff;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              padding: 0rem 0.5rem;
              position: absolute;
              top: 0rem;
              bottom: auto;
              left: auto;
              right: 0rem;

              >img {
                height: 2rem;
                width: 2rem;
              }
            }

            &:nth-child(odd) {
              margin-left: 0.8rem;
            }

            &:nth-child(even) {
              margin-right: 0.8rem;
            }
          }
        }

        .pagination-block {
          height: 5rem;
          margin: 1rem 0.5rem;
          background-color: rgba(0, 0, 0, 0.2);
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;

          .el-button--small {
            background: rgba(71, 136, 251, 0.8);
            border-color: rgba(71, 136, 251, 0.8);
            font-size: 1rem;
            color: #fff;

            &:hover {
              background: rgb(71, 136, 251);
              border-color: rgb(71, 136, 251);
            }
          }

          .total {
            font-size: 1rem;
            color: #fff;
          }
        }
      }
    }

    .button-showOrhide {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 2rem;
      position: relative;

      .button-hide-panel {
        height: 8rem;
        text-align: center;
        bottom: 0;
        color: rgba(255, 255, 255, 0.8);
        pointer-events: auto;
        border: 1px solid rgba(45, 92, 171, 0.75);
        background-color: rgba(11, 104, 112, 0.2);
        border-radius: 0.1rem;
        border-top-left-radius: 1.5rem;
        border-bottom-left-radius: 1.5rem;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 3rem;

        >i {
          font-size: 1.6rem;
          // line-height: 1rem;
          color: rgba(255, 255, 255, 0.8);
          transition: all 300ms ease-out;
        }

        &:hover {
          border-color: rgba(11, 104, 112, 0.9);
        }
      }

      .button-show-panel {
        height: 8rem;
        text-align: center;
        bottom: 0;
        color: rgba(255, 255, 255, 0.8);
        pointer-events: auto;
        border: 1px solid rgba(45, 92, 171, 0.75);
        background-color: rgba(11, 104, 112, 0.2);
        border-radius: 0.1rem;
        border-top-right-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 32rem;

        >i {
          font-size: 1.6rem;
          // line-height: 1rem;
          color: rgba(255, 255, 255, 0.8);
          transition: all 300ms ease-out;
        }

        &:hover {
          border-color: rgba(11, 104, 112, 0.9);
        }
      }
    }
  }

  .el-select-dropdown {
    border-color: rgba(45, 92, 171, 0.8);

    .el-select-dropdown__wrap {
      background: rgba(45, 92, 171, 0.8);
      border-color: rgba(45, 92, 171, 0.8);

      .el-select-dropdown__item {
        color: #fff;
        font-size: 1rem;

        &:hover {
          background-color: rgba(45, 92, 171, 0.9) !important;
        }
      }

      .el-select-dropdown__item.hover {
        background-color: rgba(45, 92, 171, 0.9) !important;
      }
    }
  }

  .el-popper {
    .popper__arrow {
      border-bottom-color: rgba(45, 92, 171, 0.6) !important;

      &::after {
        border-bottom-color: rgba(45, 92, 171, 0.6) !important;
      }
    }
  }

  .el-popper.el-cascader__dropdown {
    border-color: rgba(45, 92, 171, 0.8);

    .el-cascader-panel {
      font-size: 1rem;
      color: #fff;
      background-color: rgba(45, 92, 171, 0.8);

      .el-cascader-menu {
        border-right-color: rgba(45, 92, 171, 0.8);

        .el-cascader-node:not(.is-disabled) {
          &:focus {
            background-color: rgba(45, 92, 171, 0.9);
          }

          &:hover {
            background-color: rgba(45, 92, 171, 0.9);
          }
        }

        .el-cascader-node {
          color: #fff;
        }
      }
    }
  }
</style>
